<script setup>
import { watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAssistantStore } from '@/stores/assistant'

const route = useRoute()
const router = useRouter()

const assistantStore = useAssistantStore()

const navigateToList = (name) => {
  if (!name || name === 'assistant') {
    router.replace({ name: 'assistantList' })
  }
}

watch(
  () => route.name,
  (name) => navigateToList(name)
)

onMounted(async () => {
  if (!assistantStore.categories.length) {
    await assistantStore.getCategories()
  }
  navigateToList(route.name)
})
</script>
<template>
  <div class="h-full bg-[--el-fill-color-lighter] text-[--el-text-color-primary]">
    <RouterView />
  </div>
</template>
